<template>
  <div>
    <el-row>

      <el-col :span="9">

        <el-card :body-style="{ padding: '0px' }">
          <img :src="info.hairImg" class="image">
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <el-descriptions title="介绍">
                <el-descriptions-item label="健身项目">{{ info.hairName }}</el-descriptions-item>
                <!--            <el-descriptions-item label="项目类型">{{info.hairTypeName}}</el-descriptions-item>-->
                <el-descriptions-item label="价格">
                  <el-tag size="small">￥{{ info.hairPrice }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="订单">
                  <el-tag size="small">{{ info.orderCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="简介">{{ info.hairDes }}</el-descriptions-item>

                <!--                <el-descriptions-item label="选择日期">-->

                <!--                  <el-date-picker-->
                <!--                      v-model="orderData"-->
                <!--                      type="date"-->
                <!--                      placeholder="选择日期">-->
                <!--                  </el-date-picker>-->
                <!--                </el-descriptions-item>-->
                <!--               -->
              </el-descriptions>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="9">
        <el-card v-for="(o,index) in typeList" :key="o.barberId">
          <el-image :src="o.barberImg" class="image" style="height: 60%;width: 60% ;"/>
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <el-descriptions :column="2">
                <el-descriptions-item label="健身项目">{{ o.barberName }}</el-descriptions-item>
                <!--            <el-descriptions-item label="项目类型">{{info.hairTypeName}}</el-descriptions-item>-->
                <el-descriptions-item label="选择">

                  <el-button v-if="o.barberStatus" type="primary" size="mini"
                             @click="choose(index)">选择
                  </el-button>

                  <el-button v-else type="primary" size="mini" @click="notChoose(index)">取消
                  </el-button>
                  <el-tag v-show="o.barberStatus==1?false:true">已选择</el-tag>

                  <!--                  <el-button @click="choose(o.barberId)"  v-if="isChoose" type="primary" size="mini">确定</el-button>-->
                  <!--                  <el-button @click="choose(o.barberId)"  v-else type="primary" size="mini">取消</el-button>-->
                </el-descriptions-item>
                <el-descriptions-item label="价格">
                  <el-tag size="small">￥{{ o.barberPrice }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="订单">
                  <el-tag size="small">{{ o.orderCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="简介">{{ o.barberDes }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <el-date-picker
              v-model="orderDate"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
          <el-button type="primary" @click="addCart"  style="margin-top: 20px">加入购物车</el-button>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "projectDetail",
  data() {
    return {
      id: this.$route.params.id,
      info: [],
      typeList: [],
      isChoose: true,
      coachId: null,
      orderDate: null
    }
  },
  mounted() {
    console.log(this.id);
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await this.$axios.get('/api/project/find/' + this.id)
      this.info = res.data.content
      // console.log(res)
      this.coachByType();
    },
    async coachByType() {
      const TypeId = this.info.barberTypeId
      // console.log(barberTypeId)
      const res = await this.$axios.get('/api/coach/findTypeId/' + TypeId)
      // console.log(res)
      this.typeList = res.data.content;
      // console.log(this.typeList)
      // const length = this.baberList.length
    },
    choose(index) {
      if (this.coachId != null) {
        this.$message({
          message: '请先取消已选',
          type: 'warning',
          offset: 80
        })
        return
      }
      this.typeList[index].barberStatus = 0
      this.coachId = this.typeList[index].barberId;
      console.log(this.coachId)
    },
    notChoose(index) {
      console.log('取消:')
      this.typeList[index].barberStatus = 1
      this.coachId = null
      console.log(index)
    },
    addCart: async function () {
      if (this.coachId == null || this.orderDate == null) {
        this.$message({
          message: '日期或理发师未选择',
          type: 'error',
          offset: 80
        })
        return false
      }
      this.$message({
        message: '加入购物车成功',
        type: 'success',
        offset: 80
      })
      // 准备参数
      // const user=this.$store.getters.get_user;
      // console.log(user.id)
      const data=this.dateFormat(this.orderDate)
      // console.log(data)
      const params = {
        userId: this.$store.getters.get_user.id,
        hairId: this.id,
        barberId: this.coachId,
        orderDate: data
      }
      console.log(params)
      // 发送请求
      const res = await this.$axios.post('/api/cart/addCart',params)
      console.log(res)
      // this.cartLen()
    },
    dateFormat(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      // const hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      // const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // const seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day;
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin-right: 20px;
}
</style>